<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0 auto;
        }
        #outer {
            width: 405px;
            height: 130px;
            margin-top: 30px;
        }
        #topper{
            width: 403px;
            height: 30px;
        }
        #topper ul{
            list-style: none;
            width: 404px;
            margin: 0px;
            padding: 0px;
        }
        #topper li{
            border: 1px solid gray;
            width: 99px;
            height: 30px;
            float: left;
            text-align: center;
            line-height: 30px;
        }
        #topper ul .active{
            border-bottom: none;
        }
        #bottomer{
            border: 1px solid gray;
            border-top: none;
            width: 403px;
            height: 100px;
        }
        #bottomer p{
            padding: 30px;
            text-indent: 10px;
            display: none;
        }
        #bottomer .act{
            display: block;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="topper">
        <ul>
            <li class="active" onmouseover="action(0)">许嵩</li>
            <li onmouseover="action(1)">周杰伦</li>
            <li onmouseover="action(2)">林俊杰</li>
            <li onmouseover="action(3)">陈奕迅</li>
        </ul>
    </div>
    <div id="bottomer">
        <p class="act">断桥残雪、千百度、幻听、想象之中</p>
        <p>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</p>
        <p>被风吹过的夏天、江南、一千年以后</p>
        <p>十年、浮夸、K歌之王</p>
    </div>
</div>
<script type="text/javascript">
    function action(id) {
        topper = document.getElementById("topper");
        list = topper.getElementsByTagName("li");
        for (let i = 0; i < list.length; i++) {
            list[i].className = "";
        }
        list[id].className = "active"
        bottomer = document.getElementById("bottomer");
        p = bottomer.getElementsByTagName("p");
        for (let j=0;j<p.length;j++){
            p[j].className = "";
        }
        p[id].className = "act";
    }
</script>
</body>
</html>